<template>
	<div id="app">
		<!-- 这边需要解析支付宝返回回来的支付结果，并调用后端的接口修改订单信息 -->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">发表评价</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" @click="go_order()" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<!-- 需要显示支付凭证 -->
		<div>
			<v-list-item three-line >
				<v-list-item-avatar tile size="100" width="130" class="image_border_list"><img :src="house_data.index_image_url"
						alt="未加载" />
				</v-list-item-avatar>
				<v-list-item-content>
					<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{house_data.title}}</span></v-list-item-title>
					<v-list-item-subtitle><span>{{house_data.area_name}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house_data.lease_type}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house_data.acreage}}m²</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house_data.renovation}}</span></v-list-item-subtitle>
					<div class="overline" style="color:#FF5252">{{house_data.address}}</div>
				</v-list-item-content>
			</v-list-item>
			<v-divider></v-divider>
			<v-col>
				<icon name="comment" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">综合评价</span>
							<div style="height: 1vh;"></div>
				<v-textarea outlined name="input-7-4" label="请对该订单进行评价" v-model="textarea" counter="45" maxlength="45" style="font-size: 13px;color: grey;"></v-textarea>
			</v-col>

			<div style="margin: 0 auto;text-align: center;">
				<v-btn center color="#FF5252" class="mr-4" style="font-size: 18px;color:white;width:60% !important; " @click="comment()">
					发表评价
				</v-btn>
			</div>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "CommentOrder",
		data() {
			return {
				check: false,
				valid: true,
				timeout: 1000,
				snackbar: false,
				textarea:'',
				message: '',
				house_data: "",
				order_id: this.$route.params.order_id
			}
		},
		methods: {
			go_order() {
				this.$router.push({
					path: "/mine/house_order"
				});
			},
			comment() {
				let _this = this;
				if(this.textarea == ""){
					_this.snackbar = true;
					_this.message = "评价不能为空";
					return;
				}
				axios
					.post("/api/v1.0/order/comment_order", {
						order_id: _this.order_id,
						comment: _this.textarea
					})
					.then(function(response) {
						if(response.data.errno == "0"){
							_this.snackbar = true;
							_this.message = "评价成功";
							setTimeout(function() {
								_this.$router.push({
									path: "/mine/house_order"
								});
							}, 1000);
						}else{
							_this.message = response.data.errmsg;
							setTimeout(function() {
								_this.$router.push({
									path: "/mine/house_order"
								});
							}, 1000);
						}
					})
					.catch(function() {
						_this.snackbar = true;
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			console.log(this.order_id)
			let _this = this;
			axios
				.get("/api/v1.0/order/get_pay_order", {
					params: {
						order_id: this.order_id
					}
				})
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.house_data = response.data.data.house;
						console.log(_this.house_data);
					} else if (response.data.errno == '4101') {
						// 未登跳转到登录页面
						setTimeout(function() {
							_this.$router.replace({
								path: "/login"
							});
						}, 1000);
					} else {
						console.log(response.data)
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scoped>

</style>
